<template>
  <div class="headContainer">
    <div class="header">
      <div class="tab-panel">
        <div class="head-logo">
          <img src="../assets/images/logo.png" alt="文件管理系统">
        </div>
        <div class="tab-item" :class="{'active': $route.name === 'Home'}" @click="switchTab('Home')">文件查询</div>
        <div class="tab-item" :class="{'active': $route.name === 'UploadPage'}" @click="toUploadPage">文件上传</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  component:{},
  data() {
    return {
      active: 0,
      interval: 2000
    }
  },
  created: function() {
    console.log('route')
    console.log(this)
  },
  methods: {
    switchTab(routeName) {
      if (this.$route.name === routeName) {
        return
      } else {
        this.$router.push({
          name: routeName
        })
      }
    },
    toUploadPage() {
      this.$router.push({
        name: 'UploadPage'
      })
    },
    toSearchPage() {
      this.$router.push({
        name: 'SearchPage'
      })
    },
  }
}
</script>